<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
<!--    <link rel="stylesheet" href="/css/detailPages.css">-->
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/index.css" />
    <link rel="stylesheet" href="/css/common.css"/>
    <style>
        .loginForm {
            position: absolute;
            top: 30vh;
            left: auto;
            right: auto;
            width: 100%;
            padding: 10%;
        }
        el-input {
            border-radius: 20px;
        }
        body{
            /*background: url("/image/LoginBackground.png") no-repeat ;*/
            background-size: cover;
            -webkit-background-size: cover;
        }
    </style>
</head>
<body>
<img src="/image/LoginBackground.png" style="position: absolute;top: 0;left: 0;width: 100vw;height: 100vh">
<div id="app" style="height: 100vh">
    <div class="loginForm">
        <div style="font-weight: bolder;font-size: 2em;position: absolute;left: 40px">
            登录
        </div>
        <el-form label-width="auto" :model="loginForm" style="margin-top: 60px">
            <el-form-item label="用户名">
                <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="loginForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                        type="warning"
                        round plain
                        @click="onRigest"
                        :disabled="disabled"
                >注册</el-button>
                <el-button
                        type="primary"
                        round plain
                        @click="onLogin"
                        :disabled="disabled"
                        style="margin-left: 11vw"
                >登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
<!--    <img class="image_2" src="/image/loginBackground2.png"/>-->
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el : "#app",
        mounted(){

        },
        methods : {
            onLogin(){
                axios({
                    method: "post",
                    url: "/userLogin",
                    data: this.loginForm
                }).then((resp)=>{
                    if(resp.data.code === 1){
                        window.history.replaceState(null,null,'/mainPage')
                        window.history.go(0)
                        // window.location.href = "/mainPage"
                        localStorage.setItem("user",this.loginForm.username)
                    }else {
                        this.$message({
                            message : resp.data.msg,
                            type: 'warning'
                        })
                        // this.disabled = false
                    }
                })
            },
            onRigest(){
                window.location.href = "/toUserRegister"
            }
        },
        data(){
            return {
                disabled: false,
                loginForm: {
                    username: '',
                    password: '',
                }
            }
        }
    })
</script>
</html>